<template>
	<view class="block">
		<view class="IMA">
			<view>冰雪纪元</view>
		</view>
		<view class="container">
			<view style="width: 100%;">
				<u-form labelPosition="top" :model="model" :rules="rules" style="width: 100%" ref="uForm">
					<u-form-item :labelWidth="200" label="手机" prop="phone">
						<u-input v-model="model.phone" placeholder="请输入手机号" maxlength="11">
							<view slot="prefix" style="width: 51rpx;display: flex;align-items: center;">
								<image src="/static/loginImages/mobile_1.png" mode="widthFix" style="width: 50rpx;">
								</image>
							</view>
						</u-input>
					</u-form-item>

					<u-form-item :labelWidth="200" label="验证码" prop="smsCode">
						<u-input v-model="model.smsCode" placeholder="请输入验证码">
							<view slot="prefix" style="width: 70rpx;display: flex;align-items: center;">
								<image src="/static/loginImages/code_1.png" mode="widthFix" style="width: 50rpx;">
								</image>
							</view>
							<view slot="suffix" class="codeStyle">
								<view class="line"></view>
								<view v-if="codeType==0" style="color: #1DA779;" @click="handleCode">获取验证码</view>
								<view v-if="codeType==1" style="color: #1DA779;">发送中...</view>
								<view v-if="codeType==2" style="color: #CFCFCF;">{{countdown}}s</view>
							</view>
						</u-input>
					</u-form-item>
					<u-form-item :labelWidth="200" label="设置密码" prop="password">
						<u-input v-model="model.password" placeholder="请输入密码" :password="isPassword">
							<view slot="prefix" style="width: 70rpx;display: flex;align-items: center;">
								<image src="/static/loginImages/password_1.png" mode="widthFix" style="width: 40rpx;">
								</image>
							</view>
							<view slot="suffix" style="width: 50rpx;">
								<u-icon name="eye-fill" v-if="isPassword" @click="isPassword=!isPassword"></u-icon>
								<u-icon name="eye-off" v-if="!isPassword" @click="isPassword=!isPassword"></u-icon>
							</view>
						</u-input>
					</u-form-item>
					<u-form-item :labelWidth="200" label="邀请码" prop="code">
						<u-input v-model="model.code" placeholder="请输入邀请码">
							<view slot="prefix" style="width: 70rpx;display: flex;align-items: center;">
								<image src="/static/loginImages/password_1.png" mode="widthFix" style="width: 40rpx;">
								</image>
							</view>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view style="height: 90rpx;"></view>
			<u-button :custom-style="customStyleBtn1" :loading="loading" @click="handleRegister">
				立即注册
			</u-button>
			<view class="appStyle" @click="handleDownload">
				<image src="/static/copy.png" mode="widthFix" style="width: 35rpx;"></image>
				<view style="margin-left: 20rpx;">已有账号 下载APP</view>
			</view>
			<view class="xieyi">
				<view class="gx" v-if="!isAgreement" @click="isAgreement=true">
				</view>
				<image src="/static/loginImages/gx_1.png" mode="widthFix" style="width: 30rpx;margin-right: 10rpx;"
					v-if="isAgreement"></image>
				<view style="color: #9E9E9E;" @click="isAgreement=true">已阅读并同意</view>
				<view @click="isAgree=true">《用户协议》</view>
				<view style="color: #9E9E9E;">和</view>
				<view @click="isPolicy=true">《隐私政策》</view>
			</view>
			<view class="sm"> 注意:注册手机号和身份证必须为同一人才可成功实名认证，未成年禁止使用本APP </view>
		</view>

		<agreement :show="isAgree" @message="isAgree=false" />
		<policy :show="isPolicy" @message="isPolicy=false" />
	</view>

</template>

<script>
	import agreement from './components/agreement.vue'
	import policy from './components/policy.vue'
	import {
		getCode,
		setRegister,
		getDownload,
	} from '@/api/login.js'
	import {
		Toast
	} from '@/utils/common.js'
	export default {
		components: {
			agreement,
			policy
		},
		data() {
			return {
				isPolicy: false, //隐私显示和隐藏
				isAgree: false, //协议显示和隐藏
				isPassword: true, //查看密码
				isAgreement: false, //勾选同意注册
				loading: false,
				countdown: 60, // 设置倒计时初始值
				isCounting: false, // 是否正在倒计时
				timer: null, // 用于存储计时器
				customStyleBtn1: {
					width: '100%',
					height: '80rpx',
					borderRadius: '80rpx',
					background: "#3772FE",
					fontSize: '30rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px',
					isEye: false
				},
				rules: {
					phone: {
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					smsCode: {
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					code: {
						required: true,
						message: '请输入邀请码',
						trigger: ['blur', 'change']
					}
				},
				model: {
					phone: '',
					password: '',
					code: '',
					smsCode: ''
				},
				codeType: 0,
				isEquipment:null,//1 安卓  2 ios
			}
		},
		onLoad(option) {
			this.model.code = option.code
			// 判断是安卓还是ios
			let ran = navigator.userAgent
			let isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
			let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
			if (isAndroid) {
				this.isEquipment = 1
			}
			if (isIOS) {
				this.isEquipment = 2
			}
		},
		methods: {
			// 下载App
			async handleDownload() {
				let res = await getDownload()
				let Android = res.data.path
				let ios = res.data.iosPath
				if(this.isEquipment == 1){ //安卓
					let res = await getDownload()
					var link = document.createElement('a');
					link.href = 'http://39.107.79.224:8080' + Android;
					link.download = 'http://39.107.79.224:8080' + Android;
					link.click();
				}
				if(this.isEquipment == 2){ //ios
					var link = document.createElement('a');
					link.href = 'http://39.107.79.224:8080' + ios;
					link.download = 'http://39.107.79.224:8080' + ios;
					link.click();
				}

			},
			// 注册
			async handleRegister() {
				this.$refs.uForm.validate().then(res => {
					if (!this.isAgreement) {
						uni.showToast({
							title: '请阅读并同意用户协议和隐私政策',
							icon: 'none'
						})
						return
					}
					this.loading = true
					setRegister(this.model).then(res => {
						this.loading = false
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.handleDownload()
						}, 1500)
					}).catch(err => {
						this.loading = false
					})
				})
			},
			// 获取验证码
			handleCode() {
				this.codeType = 1
				if (this.isCounting) return;
				this.getCode()
			},
			// 获取验证码
			async getCode() {
				const res = await getCode({
					phone: this.model.phone
				})
				this.isCounting = true; // 设置为正在倒计时状态
				this.timer = setInterval(() => {
					this.codeType = 2
					if (this.countdown <= 0) {
						clearInterval(this.timer); // 清除定时器
						this.isCounting = false;
						this.countdown = 60; // 重置倒计时
					} else {
						this.countdown--;
					}
				}, 1000);
			},
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	.IMA {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
	}

	.appStyle {
		margin: 40rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(to bottom, #F2F2F2, #D1D1D1);
	}

	.block {
		width: 95%;
		height: 100vh;
		margin: 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sm {
		text-align: center;
		font-size: 12px;
		color: rgb(255, 0, 0);
		margin-top: 20px;
	}

	.gx {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		border: 1rpx solid #CCCCCC;
		margin-right: 10rpx;
	}

	.xieyi {
		height: 50rpx;
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		font-size: 20rpx;
	}

	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 50rpx;
		box-sizing: border-box;
	}
</style>